body {
  background: rgba(0, 0, 0, .05);
}

.search-box {
  display: flex;
  align-items: center;
  background: white;
  padding: .5rem 0;

  svg {
    margin: 0 .5rem;
  }
  .clear-text {
    font-size: 14px;
  }
}

.suggest {
  padding: .5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  animation: show .3s;

  .icon {
    font-size: 16px;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid white;
    transform-origin: 0 0;
    transform: scaleY(.5);
  }
}

.search-ipt {
  flex-grow: 1;
  display: flex;
  align-items: center;

  > input {
    flex-grow: 1;
    margin: 0;
    background: white;
    text-align: left;
  }

}

.container-title {
  background: white;
  margin-top: 1rem;
  padding: .5rem;
  font-weight: 500;
}

.hot-city,
.all-city {
  background: white;
  contain: style layout;
}

.all-city {
  display: flex;
  flex-flow: row wrap;
  padding: .5rem;
  position: relative;
  box-shadow: 0 1px 5px -3px rgba(0, 0, 0, .2);
  justify-content: flex-start;

  .city {
    min-width: 25%;
    max-width: 33.333%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    font-size: 13px;
    transition: all .2s;
    flex-grow: 1;

    &.active {
      color: orangered;
    }

    &.even {
      background: rgba(0, 0, 0, .01);
    }
    &.sing {
      background: rgba(0, 0, 0, .05);
    }
  }
}

.hot-city {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: .5rem 0;

  .city {
    padding: .2rem;
    margin: .3rem;
    border: 1px solid #dbdbe1;
    border-radius: 2px;

    &:active {
      color: white;
      background: orange;
      border-color: orange;
    }
  }
}

.all-city-show {
  background: white;
  animation: show .3s;

  .city {
    padding: .2rem;
    margin: .3rem;
    border: 1px solid #dbdbe1;
    border-radius: 2px;
    transition: all .2s;

    &:active {
      color: white;
      background: orange;
      border-color: orange;
    }
  }
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
